<template>

  <div id="app">
    <el-upload
      accept="image/*"
      action="https://upload-z2.qiniup.com"
      :data="authData"
      list-type="picture-card"
      :file-list="imageList"
      :on-preview="handelImagePreview"
      :before-upload="handelBeforeUpload"
      :on-success="handleImageSuccess"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog append-to-body :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
  import { getQiNiuToken } from '../../api/qiniu'

  export default {
    name: 'ImageUpload',
    data() {
      return {
        imageUrl: '',
        dialogVisible: false,
        imageList: [],
        authData: {
          token: '',
          cdn: ''
        }
      }
    },
    methods: {

      async handelBeforeUpload() {
        this.authData = (await getQiNiuToken()).data
      },

      handelImagePreview(file) {
        this.dialogVisible = true
        this.imageUrl = file.url
      },
      handleRemove(file, fileList) {
        this.imageList = fileList
      },

      //详情图片成功上传
      handleImageSuccess(res, file, fileList) {
        this.imageList = fileList
        this.$emit("upload-success",fileList)
      }

    },
    created() {

    }
  }
</script>

<style scoped>

</style>
